<template>
  <div class="app-container">
    <el-dialog
      :title="pid?'编辑':'新增'"
      :visible.sync="centerDialogVisible"
      width="75%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
      class="equipmentAdd"

      >
      <!-- fullscreen -->
      <div class="middle left">
        <el-radio v-model="addForm.deviceLevel" label="1">主设备</el-radio>
        <el-radio v-model="addForm.deviceLevel" label="2">子设备</el-radio>
        <h4>基本信息</h4>
        <table border="1" rules="all" class="table">
          <tr>
            <td class="titleName">设备编号</td>
            <td class="inputName">
              <el-input v-model="addForm.deviceCode" placeholder="不填写则自动生成"></el-input>
            </td>
            <td class="titleName">资产编号</td>
            <td class="inputName">
              <el-input v-model="addForm.assetsCode" ></el-input>
            </td>
            <td class="titleName">出厂编号</td>
            <td class="inputName">
              <el-input v-model="addForm.factoryCode" ></el-input>
            </td>
          </tr>
          <tr>
            <td class="titleName">设备名称</td>
            <td class="inputName">
              <el-input v-model="addForm.deviceName" ></el-input>
            </td>
            <!-- <td class="titleName">电子标签码</td>
            <td class="inputName">
              <el-input v-model="addForm.electronicLabel" ></el-input>
            </td> -->
            <td class="titleName">设备分类</td>
            <td class="inputName">
              <treeSelect @deviceType="deviceTypeChange" :model="deviceVo.deviceTypeName"  type="deviceType"></treeSelect>
            </td>
            <td class="titleName">生产厂家</td>
            <td class="inputName">
              <el-select v-model="addForm.supplier" placeholder="请选择" clearable>
                <el-option v-for="item in supplierList" :key="item.id" :label="item.supplierName" :value="item.id"/>
              </el-select>
            </td>
          </tr>
          <tr>
            <!-- <td class="titleName">品牌</td>
            <td class="inputName">
              <el-select v-model="addForm.deviceBrand" placeholder="请选择" clearable>
                <el-option v-for="item in deviceBrandList" :key="item.id" :label="item.brandName" :value="item.id"/>
              </el-select>
            </td> -->
            <td class="titleName">规格型号</td>
            <td class="inputName" colspan="3">
              <el-input v-model="addForm.deviceModel" ></el-input>
            </td>
            <td class="titleName">单位</td>
            <td class="inputName">
              <el-select v-model="addForm.deviceUnit" placeholder="请选择" clearable>
                <el-option v-for="item in deviceUnitsList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"/>
              </el-select>
            </td>
          </tr>
          <tr>


            <!-- <td class="titleName">购置金额</td>
            <td class="inputName">
              <el-input v-model="addForm.buyMoney" type="number" ></el-input>
            </td> -->
          </tr>
          <tr>
            <!-- <td class="titleName">保修期 （到期日）</td>
            <td class="inputName">
              <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="addForm.warrantyTime" type="date" placeholder="选择日期" />
            </td> -->
            <td class="titleName">投产日期</td>
            <td class="inputName" colspan="2">
              <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="addForm.productionDate" type="date" placeholder="选择日期" />
            </td>
            <!-- <td class="titleName">预计报废日期</td>
            <td class="inputName">
              <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="addForm.expectedRetireDate" type="date" placeholder="选择日期" />
            </td> -->
            <td class="titleName">购置日期</td>
            <td class="inputName" colspan="2">
              <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="addForm.buyDate" type="date" placeholder="选择日期" />
            </td>
          </tr>
          <tr>
            <td class="titleName">技术改造(机械方面)</td>
            <td class="inputName">
              <el-input v-model="addForm.remouldMechanical" ></el-input>
            </td>
            <td class="titleName">技术改造(电器方面)</td>
            <td class="inputName">
              <el-input v-model="addForm.remouldElectric" ></el-input>
            </td>
            <td class="titleName">购买形式</td>
            <td class="inputName">
              <el-select v-model="addForm.purchasingForm" placeholder="请选择" clearable>
                <el-option v-for="item in [{name:'购买',id:1},{name:'租赁',id:2}]" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </td>
          </tr>
          <tr>
            <!-- <td class="titleName">过煤量/进尺</td>
            <td colspan="2">
              <el-input v-model="addForm.coalYield" ></el-input>
            </td> -->
            <td class="titleName">招标日期</td>
            <td class="inputName">
              <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="addForm.invitationDate" type="date" placeholder="选择日期" />
            </td>
            <td class="titleName">到矿日期</td>
            <td class="inputName">
              <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="addForm.arrivalDate" type="date" placeholder="选择日期" />
            </td>
            <td class="titleName">设备状态</td>
            <td >
              <el-select v-model="addForm.deviceStatus"  placeholder="请选择"  clearable >
                <el-option v-for="item in deviceStatusList" :key="item.id" :label="item.statusName" :value="item.id"/>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="titleName">所属部门</td>
            <td colspan="5">
              <treeSelect @department="departmentChange" :model="deviceVo.departmentName" type="department"></treeSelect>
            </td>
          </tr>
          <tr>
            <td class="titleName">存放位置</td>
            <td colspan="5">
              <treeSelect @deviceRepo="deviceRepoChange" :model="deviceVo.repositoryName"  type="deviceRepo"></treeSelect>
            </td>
          </tr>

          <!--0722szw修改-->
  <!--        <tr>-->
  <!--          <td class="titleName">是否开启管控</td>-->
  <!--          <td class="inputName">-->
  <!--            <el-select v-model="addForm.isControl" placeholder="请选择">-->
  <!--              <el-option v-for="item in isWhether" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
  <!--            </el-select>-->
  <!--          </td>-->
  <!--          <td class="titleName">是否开启折旧</td>-->
  <!--          <td class="titleName">-->
  <!--            <el-select v-model="addForm.isDepreciation" placeholder="请选择">-->
  <!--              <el-option v-for="item in isWhether" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
  <!--            </el-select>-->
  <!--          </td>-->
  <!--          <td class="titleName">当前净值</td>-->
  <!--          <td class="inputName">-->
  <!--            <el-input v-model="addForm.currentValue" ></el-input>-->
  <!--          </td>-->
  <!--        </tr>-->
  <!--        <tr>-->
  <!--          <td class="titleName">理论生产节拍</td>-->
  <!--          <td colspan="5">-->
  <!--            <el-input v-model="addForm.produceBeat"  type="number"></el-input>-->
  <!--          </td>-->
  <!--        </tr>-->
          <tr>
            <td class="titleName">备注</td>
            <td colspan="5">
              <el-input v-model="addForm.remark" ></el-input>
            </td>
          </tr>
        </table>
      <!-- <h4>拓展属性</h4>
      <table border="1" rules="all" class="table">
        <tr>
          <td class="titleName">设备机况</td>
          <td colspan="5">
            <el-select v-model="addForm.machineCondition"  placeholder="请选择"  clearable >
              <el-option v-for="item in machineConditionList" :key="item.id" :label="item.machineConditionName" :value="item.id"/>
            </el-select>
          </td>
        </tr>
      </table> -->
      <div class="upload">
        <el-upload
          :show-file-list="false"
          class="upload-demo"
          :action="baseUrl()+'/common/upload'"
          :on-success="imgSuccess"
          :before-upload="imgBefore">
          <el-button size="small" type="warning" icon="el-icon-folder-add" >设备图片</el-button>
        </el-upload>
        <div class="unloadBox">
          <div class="img" v-for="(item,index) in addForm.annexImgList">
            <el-image :src="baseUrl()+item.filePath" :preview-src-list="[baseUrl()+item.filePath]"></el-image>
            <i class="el-icon-close" @click="imgDel(index,item.filePath)"></i>
          </div>
        </div>
      </div>
    <!-- <div class="middle right"> -->
      <div class="upload">
        <el-button  size="small" type="warning" icon="el-icon-folder-add" @click="fileDialog">相关文件</el-button>
        <div class="unloadBox">
          <div class="file" v-for="(item,index) in addForm.annexFileList">
            <span class="index">{{index+1}}、</span>
            <span class="blue">{{item.fileName}}</span>
<!--            <i class="blue el-icon-bottom" @click="fileDown(index,item.filePath)" ></i>-->
            <i class="blue el-icon-delete" @click="fileDel(index,item.filePath)" ></i>
            <span class="type">{{filterDocumentRank(item.encryptionRank)}}</span>
            <span class="type">{{filterAnnexType(item.typeId)}}</span>
          </div>
        </div>
        <el-dialog :close-on-click-modal="false" title="上传文件" :visible.sync="fileVisible" width="400px">
          <el-form class="fileForm" :model="fileForm" ref="fileForm" :inline="true" label-width="110px">
            <el-form-item label="文档类型：" prop="typeId" :rules="[{required: true, message: '请选择文档类型', trigger: 'change'}]">
              <el-select v-model="fileForm.typeId  " placeholder="请选择" clearable >
                <el-option v-for="item in deviceAnnexTypeList" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode"/>
              </el-select>
            </el-form-item>
            <el-form-item label="文档密级：" prop="encryptionRank" :rules="[{required: true, message: '请选择文档密级', trigger: 'change'}]">
              <el-select v-model="fileForm.encryptionRank" placeholder="请选择" clearable>
                <el-option v-for="item in deviceDocumentRankList" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode"/>
              </el-select>
            </el-form-item>
            <el-form-item label="相关文件：">
              <el-upload
                :disabled="!fileForm.typeId?true:false || !fileForm.encryptionRank?true:false"
                :show-file-list="false"
                :action="baseUrl()+'/common/upload'"
                :on-success="fileSuccess">
                <el-button size="small" type="warning" icon="el-icon-folder-add" :disabled="!fileForm.typeId?true:false || !fileForm.encryptionRank?true:false" >设备图片</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <h4 v-if="addForm.deviceLevel==1">
        子设备
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSubSet">添加</el-button>
      </h4>
      <el-table :data="subSetList" border v-if="addForm.deviceLevel==1">
        <el-table-column align="center" label="设备编号" prop="deviceCode" width="150"></el-table-column>
        <el-table-column align="center" label="设备名称" prop="deviceName"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column align="center" label="设备品牌" prop="deviceBrandsName" :show-overflow-tooltip="true"
                         width="150"></el-table-column>
        <el-table-column align="center" label="设备型号" prop="deviceModel" width="100"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete" @click="subSetDel(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <h4>技术参数
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addExpand">添加</el-button>
      </h4>
      <el-table :data="addForm.deviceExpandList" border>
        <el-table-column type="index" label="序号" width="50px" />
        <el-table-column align="center" label="名称" prop="expandKey">
          <template slot-scope="scope">
            <el-input v-model="scope.row.expandKey"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="属性值" prop="expandValue">
          <template slot-scope="scope">
            <el-input v-model="scope.row.expandValue"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete" @click="expandDel(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      <h4>-->
<!--        关联设备-->
<!--        <el-button style="margin-left: 20px" type="primary" icon="el-icon-plus" size="mini" @click="addguanlian">-->
<!--          添加-->
<!--        </el-button>-->
<!--      </h4>-->
<!--      <el-table :data="guanlianList" stripe border>-->
<!--        <el-table-column align="center" label="耗材编号" property="devicecode" width="150"></el-table-column>-->
<!--        <el-table-column align="center" label="名称" property="deviceName"-->
<!--                         :show-overflow-tooltip="true"></el-table-column>-->
<!--        <el-table-column align="center" label="品牌" property="deviceBrand" :show-overflow-tooltip="true"-->
<!--                         width="150"></el-table-column>-->
<!--        <el-table-column align="center" label="分类" property="deviceModel" width="100"></el-table-column>-->
<!--        <el-table-column align="center" label="规格" property="deviceModel" width="100"></el-table-column>-->
<!--        <el-table-column align="center" label="单位" property="deviceModel" width="100"></el-table-column>-->
<!--        <el-table-column align="center" label="需求量" property="deviceModel" width="100"></el-table-column>-->
<!--        <el-table-column-->
<!--          label="操作"-->
<!--          align="center"-->
<!--          width="200">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button-->
<!--              size="mini"-->
<!--              type="danger"-->
<!--              icon="el-icon-delete"-->
<!--              @click="handleDelete(scope.$index, scope.row)">删除-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
    <!-- </div> -->
    <div class="submit">
      <el-button type="primary"  @click="submit">提交</el-button>
    </div>
    </div>
    <childDevice-AddDialog v-if="subSetVisible" @subSetChane="subSetChane"></childDevice-AddDialog>
<!--    <add-Product :routerData="transmitData" v-if="addshow" @callback="callback"></add-Product>-->
    </el-dialog>

  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import treeSelect from './treeSelect'
  import  {deviceAdd,deviceEdit,deviceDetail} from '@/api/device/index'
  import  {deviceBrand,deviceUnits,supplier,deviceStatus,machineCondition,deviceAnnexType,deviceDocumentRank,fileDelete,fileDownload,fileDeleteLibrary} from '@/api/basicInformation/index'
  import childDeviceAddDialog from '../../components/childDeviceAddDialog'
  import addProduct from '../../components/addProductDialog'

  export default {
    name: 'equipmentAdd',
    props:['pid'],
    components: {
      treeSelect,
      addProduct,
      childDeviceAddDialog,
    },
    data() {
      return {
        radio:'1',
        headers: { Authorization: "Bearer " + getToken()},
        centerDialogVisible:true,
        addForm: {
          deviceLevel:'1',
          deviceCode:'',
          assetsCode:'',
          factoryCode:'',
          deviceName:'',
          electronicLabel:'',
          deviceType:'',
          deviceBrand:'',
          deviceModel:'',
          deviceUnit:'',
          supplier:'',
          buyDate:'',
          buyMoney:'',
          warrantyTime:'',
          productionDate:'',
          expectedRetireDate:'',
          coalYield:'',
          deviceStatus:'',
          departmentId:'',
          repositoryId:'',
          isControl:2,
          isDepreciation:2,
          currentValue:'',
          produceBeat:'',
          remark:'',
          machineCondition:'',
          annexImgList:[],
          annexFileList:[],
          deviceSubsetList:[],
          deviceExpandList:[],
        },
        deviceBrandList:[],
        deviceUnitsList:[],
        supplierList:[],
        deviceStatusList:[],
        machineConditionList:[],
        isWhether:[
          { value: 1, label: '是' },
          { value: 2, label: '否' }
        ],
        //文件上传
        fileVisible:false,
        deviceDocumentRankList:[],
        deviceAnnexTypeList:[],
        fileForm:{
          typeId:'',
          typeName:'',
          encryptionRank:'',
          encryptionRankName:'',
        },
        subSetList:[],
        subSetVisible:false,
        deviceVo:{},
      }
    },
    created() {
      if(this.pid){
        this.getDeviceDetail(this.pid)
      }
      this.getDeviceBrand();
      this.getDeviceUnits();
      this.getSupplier();
      this.getDeviceStatus();
      this.getMachineCondition();
      this.getDeviceDocumentRank()
      this.getdeviceAnnexType()
    },
    methods: {
      async getDeviceDetail(id){
        let res=await deviceDetail(id)
        this.deviceVo=res.data.deviceVo
        this.addForm.id=res.data.deviceVo.deviceId;
        this.addForm.deviceCode=res.data.deviceVo.deviceCode;
        this.addForm.assetsCode=res.data.deviceVo.assetsCode;
        this.addForm.factoryCode=res.data.deviceVo.factoryCode;
        this.addForm.deviceName=res.data.deviceVo.deviceName;
        this.addForm.electronicLabel=res.data.deviceVo.electronicLabel;
        this.addForm.deviceType=res.data.deviceVo.deviceTypeId;
        this.addForm.deviceBrand=Number(res.data.deviceVo.deviceBrandsId);
        this.addForm.deviceModel=res.data.deviceVo.deviceModel;
        this.addForm.deviceUnit=res.data.deviceVo.deviceUnit;
        this.addForm.supplier=res.data.deviceVo.supplierId;
        this.addForm.buyDate=res.data.deviceVo.buyDate;
        this.addForm.buyMoney=res.data.deviceVo.buyMoney;
        this.addForm.warrantyTime=res.data.deviceVo.warrantyTime;
        this.addForm.productionDate=res.data.deviceVo.productionDate;
        this.addForm.expectedRetireDate=res.data.deviceVo.expectedRetireDate;
        this.addForm.coalYield=res.data.deviceVo.coalYield;
        this.addForm.deviceStatus=res.data.deviceVo.deviceStatusId;
        this.addForm.departmentId=res.data.deviceVo.departmentId;
        this.addForm.repositoryId=res.data.deviceVo.repositoryId;
        this.addForm.isControl=res.data.deviceVo.isControl;
        this.addForm.isDepreciation=res.data.deviceVo.isDepreciation;
        this.addForm.currentValue=res.data.deviceVo.currentValue;
        this.addForm.produceBeat=res.data.deviceVo.produceBeat;
        this.addForm.remark=res.data.deviceVo.remark;
        this.addForm.machineCondition=res.data.deviceVo.machineConditionId;
        this.addForm.annexImgList=res.data.annexImgList;
        this.addForm.annexFileList=res.data.annexFileList;
        this.addForm.deviceExpandList=res.data.deviceExpandList;
        this.subSetList=res.data.deviceSubsetList;
        this.addForm.deviceLevel=String(res.data.deviceVo.deviceLevel)
        this.addForm.invitationDate=res.data.deviceVo.invitationDate
        this.addForm.purchasingForm=res.data.deviceVo.purchasingForm
        this.addForm.remouldElectric=res.data.deviceVo.remouldElectric
        this.addForm.remouldMechanical=res.data.deviceVo.remouldMechanical
        this.addForm.arrivalDate=res.data.deviceVo.arrivalDate

       },
      /** 获取设备分类的值*/
      deviceTypeChange(data){
        this.deviceVo.deviceTypeName=data.deviceName
        this.addForm.deviceType=data.id;
      },
      /** 获取所属部门的值*/
      departmentChange(data){
        this.deviceVo.departmentName=data.label
        this.addForm.departmentId=data.id;
      },
      /** 获取存放位置*/
      deviceRepoChange(data){
        this.deviceVo.repositoryName=data.repoName
        this.addForm.repositoryId=data.id;
      },
      /** 查询品牌*/
      async getDeviceBrand(){
        let res=await deviceBrand()
        this.deviceBrandList=res.rows
      },
      /** 获取设备单位*/
      async getDeviceUnits(){
        let res=await deviceUnits()
        this.deviceUnitsList=res.data
      },
      /** 查询生产厂家*/
      async getSupplier(){
        let res=await supplier()
        this.supplierList=res.rows
      },
      /** 查询设备状态*/
      async getDeviceStatus(){
        let res=await deviceStatus()
        this.deviceStatusList=res.rows
      },
      /** 查询设备机况*/
      async getMachineCondition(){
        let res=await machineCondition()
        this.machineConditionList=res.rows
      },
      /** 查询设备文档加密级别*/
      async getDeviceDocumentRank(){
        let res=await deviceDocumentRank()
        this.deviceDocumentRankList=res.data
      },
      /** 查询设备文档类型*/
      async getdeviceAnnexType(){
        let res=await deviceAnnexType()
        this.deviceAnnexTypeList=res.data
      },
      /** 过滤加密级别*/
      filterDocumentRank(id){
        for(var i=0;i<this.deviceDocumentRankList.length;i++){
          if(id==this.deviceDocumentRankList[i].dictCode){
            return this.deviceDocumentRankList[i].dictLabel
          }
        }
      },
      /** 过滤文档类型*/
      filterAnnexType(id){
        for(var i=0;i<this.deviceAnnexTypeList.length;i++){
          if(id==this.deviceAnnexTypeList[i].dictCode){
            return this.deviceAnnexTypeList[i].dictLabel
          }
        }
      },
      ////上传图片
      imgBefore(file){
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
        if (!isJPG) {
          this.$message.error('请选择图片！');
        }
        return isJPG ;
      },
      imgSuccess(res, file) {
        this.addForm.annexImgList.push({ filePath:res.filePath,typeDistinguish:2,})
      },
      async imgDel(index,filePath){
        for(let i=0;i<this.addForm.annexImgList.length;i++){
          if(index==i){
            if(this.addForm.annexImgList[i].id){
              await fileDeleteLibrary(this.addForm.annexImgList[i].id)
            }else{
              await fileDelete(this.addForm.annexImgList[i].filePath);
            }
            this.addForm.annexImgList.splice(i, 1);
          }
        }
      },
      fileDialog(){
        this.fileVisible=true;
      },
      fileSuccess(res){
        this.fileVisible=false;
        this.addForm.annexFileList.push({ typeId:this.fileForm.typeId,encryptionRank:this.fileForm.encryptionRank,fileName:res.fileName,filePath:res.filePath,typeDistinguish:1,})
        Object.assign(this.$data.fileForm, this.$options.data().fileForm)
      },
      async fileDel(index,filePath){
        for(let i=0;i<this.addForm.annexFileList.length;i++){
          if(index==i){
            if(this.addForm.annexFileList[i].id){
              await fileDeleteLibrary(this.addForm.annexFileList[i].id)
            }else{
              await fileDelete(filePath);
            }
            this.addForm.annexFileList.splice(i, 1);
          }
        }
      },
      async fileDown(index,filePath){
        //return this.download()
        await fileDownload(filePath);
      },
      //子设备添加
      addSubSet() {
          this.subSetVisible = true
      },
      //子设备弹框回调函数
      subSetChane(data) {
        debugger
        if(data){
          this.subSetList= this.deteleObject( this.subSetList.concat(data))
          // this.$message.success('添加子设备成功');
        }
        this.subSetVisible = false
      },
      //去重
      deteleObject:function(data){
        let hash = {};
        const data2 = data.reduce((preVal, curVal) => {
          console.log(curVal)
          hash[curVal.deviceId] ? '' : hash[curVal.deviceId] = true && preVal.push(curVal);
          return preVal
        }, [])
        return data2
      },
      subSetDel(index,row){
        this.subSetList.splice(index, 1);
        this.$message.success('删除子设备成功');
      },
      addExpand(){
        this.addForm.deviceExpandList.push({'expandKey':'','expandValue':''})
      },
      expandDel(index,row){
        this.addForm.deviceExpandList.splice(index, 1);
        this.$message.success('删除设备属性成功');
      },
      close(){
        this.$emit('subSetChane')
      },
      //提交
      async submit() {
        for(var i=0;i<this.addForm.deviceExpandList.length;i++){
          if(!this.addForm.deviceExpandList[i].expandKey || !this.addForm.deviceExpandList[i].expandValue){
            this.addForm.deviceExpandList.splice(i, 1);
          }
        }
        this.addForm.deviceSubsetList=[];
        for(var i=0;i<this.subSetList.length;i++){
          this.addForm.deviceSubsetList.push({subsetId:this.subSetList[i].deviceId})
        }
        this.addForm.id ? await deviceEdit(JSON.stringify(this.addForm)) : await deviceAdd(JSON.stringify(this.addForm))
        this.addForm.id ? this.$message.success('编辑成功') : this.$message.success('新增成功')
        this.$emit('subSetChane',1)
      }
    }
  }
</script>
<style lang="scss">
  .equipmentAdd {
    .el-dialog__body{
      height: 80vh;
      overflow: scroll;
      margin: 0 30px;
    }
    .submit{
      clear: both;
      width:100%;
      text-align: center;
     .el-button{
       margin-top:20px;
     }
    }
    .blue{
      color: #2196F3;
    }
    h4 {
      color: #05A380;
      .el-button{
        margin-left: 20px
      }
    }
    .middle{
      /*width:100%;*/
      width:900px;
      padding: 0 20px;
      // height: 70vh;
      // overflow: scroll;
      margin: auto;
      .upload{
        margin-top:20px;
      }
    }
    .left{
      // float: left;

      .table {
        .el-input--medium .el-input__inner {
          border: none;
        }
        border: 1px solid #cccccc;
        color: #606266;
        font-size: 14px;
        width:100%;
        .titleName {
          text-align: center;
          width: 150px;
          padding:5px;
        }
        .inputName {
          width:150px;
        }
        .el-select{
          width: 100%;
        }
        .el-input{
          width:100%
          //max-width: 150px;
        }
      }
    }
    .right{
      float: left;
    }

    .unloadBox{
      border: 1px solid #cccccc;
      margin-top:20px;
      min-height: 50px;
      overflow: hidden;
      .file{
        width:100%;
        border-top:1px #cccccc dotted;
        line-height: 50px;
        .index{
          padding:0 10px;
          color:#666
        };
        i{
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }
        .type{
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
      .img{
        margin:10px 0 10px 10px;
        text-align: center;
        float: left;
        position: relative;
        width:110px;
        height:100px;
        .el-image{
          width:100px;
          height:100px;
          border: 1px solid #cccccc;
          position: absolute;
          top:0;
          left:0;
        }
        i{
          position: absolute;
          right: 0px;
          font-size: 20px;
          top: -4px;
          z-index: 1;
        }
      }



    }

  }
</style>
